<template>
    <div class="address-pop-main">
        <div class="address-choose-box base-main">
            <!--已选地址-->
            <div
                    v-if="!isNone"
                    class="first-address line-bottom bgcFFF pr"
                    @click="handleChooseAddress(item)"
                    v-for="(item,index) in addressListDefined"
                    :key="index">
                  <span>
                    <i class="iconfont icondagou1"></i>
                  </span>
                <div class="msg pr">
                    <p>{{item.name}}<i>{{item.tel}}</i><sub v-if="item.isDefault" class="inline-block text-c pr base-tar-defined">默认</sub></p>
                    <p class="addressDetail color7A7B82 fs12">
                        {{item.province}}{{item.city}}{{item.county}}{{item.addressDetail}}
                    </p>
                    <i class="iconfont iconbianji pa" @click.stop="toEdit(item)"></i>
                </div>
            </div>
            <!--已选地址-->

            <!--未选地址-->
            <div class="address-choose-list" v-if="!isNone">
                <ul>
                    <li
                        class="bgcFFF line-bottom"
                        v-for="(item,index) in addressListOther"
                        :key="index"
                        @click="handleChooseAddress(item)">
                        <div class="msg pr">
                            <p>{{item.name}}<i>{{item.tel}}</i><sub v-if="item.isDefault" class="inline-block text-c pr">默认</sub></p>
                            <p class="addressDetail color7A7B82 fs12">
                                {{item.province}}{{item.city}}{{item.county}}{{item.addressDetail}}
                            </p>
                            <i class="iconfont iconbianji pa" @click.stop="toEdit(item)"></i>
                        </div>
                    </li>
                </ul>
            </div>
            <!--未选地址-->

            <!--无地址-->
            <div class="none text-c fs14" v-if="isNone">
                <img src="../../assets/img/icon_none_address.png" alt="无收货地址">
                <p>暂无收货地址</p>
                <p>喜欢的商品要寄到哪里呢</p>
            </div>
            <!--无地址-->

            <div class="btn bgcFFF text-c">
                <span class="inline-block text-c" @click="toEdit">+ 新建收货地址</span>
            </div>

            <!--<van-popup-->
                <!--v-model="isEdit"-->
                <!--position="right"-->
                <!--class="new-pop">-->

                <!--<van-address-edit-->
                    <!--:area-list="areaList"-->
                    <!--:address-info="addressInfo"-->
                    <!--show-set-default-->
                    <!--@save="handleChooseAddress"-->
                    <!--save-button-text="保存并使用"-->
                <!--/>-->
            <!--</van-popup>-->
        </div>

        <Loading :show="isLoading"></Loading>
    </div>
</template>

<script type="text/ecmascript-6">
    import Loading from '../../components/Loading.vue'

    import api from '../../http/api'
    import { areaList } from '../../assets/js/area'
    import { setAddressInfoStorage,removeAddressInfoStorage } from '../../assets/js/utils'

    export default{
        components:{
            Loading,
        },
        data(){
            return {
                isNone:false,
                isLoading:false,
                areaList:areaList,
                isShowAddress: false,
                addressList:[],//地址列表
                addressListDefined:[],//已选中地址
                addressListOther:[], //未选中地址
                addressInfo: {
                    id: '',
                    name: '',
                    tel: '',
                    province:'',
                    city:'',
                    county:'',
                    areaCode:'',
                    addressDetail: '',
                    isDefault: false,
                },//收件人信息初始值
            }
        },
        created(){
            this.initData()
        },
        methods: {
            initData(){
                this.isLoading = true

                this.$ajax({
                    url:api.getUserAddressList,
                    method:'get'
                }).then(res => {
                    console.log('res-- ', res);
                    let data = res.data.content
                    this.isLoading = false
                    if(data.msg == '数据不存在'){
                        this.isNone = true
                    }else{
                        this.isNone = false
                        for (var i = 0,len = data.length; i < len; i++) {
                            if(this.$route.query.id == data[i].id){
                                this.addressListDefined.push(data[i])
                            }else{
                                this.addressListOther.push(data[i])
                            }
                        }
                    }
                    this.addressListDefined = this.formattingAddressList(this.addressListDefined)
                    this.addressListOther = this.formattingAddressList(this.addressListOther)
                }).catch(err => {
                    console.log('err-- ',err);
                })
            },
            formattingAddressList(list){
                let newArr = [];
                list.map((value,index,arry) => {
                    newArr.push({
                        'id':value.id,
                        'name': value.contacts,
                        'tel': value.mobile,
                        'province':value.province,
                        'city':value.city,
                        'county':value.district,
                        'areaCode':value.address_code,
                        'addressDetail':value.address,
                        'isDefault':value.is_default == '0' ? false : true
                    })
                })
                return newArr
            },
            //选择地址
            handleChooseAddress(item){
//                console.log('item--', item);
                setAddressInfoStorage(item)

                this.$router.push({
                    path:'/index/web/orderConfirmation',
                    query:{
                        cart_id:this.$route.query.cart_id ? this.$route.query.cart_id : '',
                        sku_data:this.$route.query.sku_data ? this.$route.query.sku_data : '',
                        product_id:this.$route.query.product_id ? this.$route.query.product_id : '',
                        product_num:this.$route.query.product_num ? this.$route.query.product_num : '',
                        sku_id:this.$route.query.sku_id ? this.$route.query.sku_id : '',
                        price:this.$route.query.price ? this.$route.query.price : '',
                    }
                })

            },
            //编辑
            toEdit(item){
//                console.log('item--', item);
                if(item.id){
                    setAddressInfoStorage(item)
                }else{
                    removeAddressInfoStorage()
                }

                this.$router.push({
                    path:'/index/web/addressEditor',
                    query:{
                        cart_id:this.$route.query.cart_id ? this.$route.query.cart_id : '',
                        sku_data:this.$route.query.sku_data ? this.$route.query.sku_data : '',
                        product_id:this.$route.query.product_id ? this.$route.query.product_id : '',
                        product_num:this.$route.query.product_num ? this.$route.query.product_num : '',
                        sku_id:this.$route.query.sku_id ? this.$route.query.sku_id : '',
                        price:this.$route.query.price ? this.$route.query.price : '',
                    }
                })
            },
            handleSave(item){
//                console.log('item--', item);
                setAddressInfoStorage(item)
                this.isShowAddress = false;
            },
        }
    }
</script>

<style lang="scss">
    @import "../../assets/css/orderConfrimationAddress.scss";
</style>